'use strict';
import React from 'react';
import {
    View,
    Text,
    Image,
    TouchableOpacity,
    StyleSheet,
} from 'react-native';
import Global from '../Commom/GlobalConst';
import RuralMapPage from '../Pages/RuralMapPage';

const styles = StyleSheet.create({
    flexRow: {
        flexDirection: 'row',
        padding: 15,
        alignItems: 'center',
        borderBottomWidth: 1,
        borderBottomColor: '#F2F3F5'
    },
    mapBox: {
        width: Global.Const.size.width,
        height: 150,
        alignItems: 'center',
        justifyContent: 'center',
    },
    mapTextBox: {
        borderWidth: 1,
        borderColor: '#38D68B',
        borderRadius: 25,
        backgroundColor: 'white',
        opacity: 0.82,
        position: 'absolute',
        left: (Global.Const.size.width - 40) / 2,
        top: 55,
        alignItems: 'center',
        justifyContent: 'center',
    },
    mapText: {
        color: '#38D68B',
        fontSize: 18,
    },
    contentText: {
        fontSize: 14,
        color: Global.FontColor.DimGray,
        marginRight: 10,
    },
    textBtn: {
        width: Global.Const.size.width - 60,
        textAlign: 'center',
        padding: 5,
        color: 'white',
        backgroundColor: '#38D68B',
        marginTop: 10,
        marginBottom: 10,
        marginLeft: 30,
        fontSize: 18
    }
});

class WatchMapView extends React.Component {

    render() {
        let {
            type,
            address,
            phone,
            price,
            time,
            isNotShowPrice,
            latitude,
            longitude,
        } = this.props;
        let borderStyle = isNotShowPrice ? {} : {
            borderBottomWidth: 0,
            paddingBottom: 0
        };
        return (
            <View style={{flex: 1,}}>
                {latitude.length > 0 ? <TouchableOpacity onPress={() => {
                    this.props.navigator.push({
                        name: 'RuralMapPage',
                        component: RuralMapPage,
                        passProps: {
                            latitude: latitude,
                            longitude: longitude,
                        },
                    })
                }}>
                    <View>
                        <Image style={styles.mapBox}
                               source={{uri: 'http://s16.sinaimg.cn/middle/5385fbf34962e153b322f&amp;690'}}/>
                        <View style={styles.mapTextBox}>
                            <Image style={{
                                width: 40,
                                height: 40,
                                backgroundColor: 'transparent',
                            }} source={require('../../Image/icon_watch_map.png')}/>
                        </View>
                    </View>
                </TouchableOpacity> : null}

                <View style={styles.flexRow}>
                    <Text style={styles.contentText}>{'地        址：'}</Text>
                    <Text numberOfLines={1} style={{fontSize: 12,color: '#666',flex: 1}}>
                        {address}
                    </Text>
                </View>
                <View style={[styles.flexRow, borderStyle]}>
                    <Text style={styles.contentText}>{
                        type === 1 ? '咨询电话：' : '开放时间：'
                    }</Text>
                    <Text numberOfLines={1} style={{fontSize: 12,color: '#666',flex: 1}}>{
                        type === 1 ? phone : time
                    }</Text>
                </View>
                {
                    isNotShowPrice ? null :
                        <View style={styles.flexRow}>
                            <Text style={styles.contentText}>{type === 1 ? '价        格：' : '门        票：'}</Text>
                            <Text style={{fontSize: 12,color: 'red',flex: 1}}>{price}</Text>
                        </View>
                }

            </View>
        )
    }
}

WatchMapView.propTypes = {
    type: React.PropTypes.number.isRequired,
};

export default WatchMapView;